import React, { useState } from 'react'
import "../../assets/css/login.less"
import { Progress, Form, Input, Button, Checkbox } from 'antd';
import { logins } from "../../apis/Login"
export default function Login(props) {
    const [text, settext] = useState('低')
    const [num, setnum] = useState(33)
    const content = (
        <div>
            <p>密码强度:{text}</p>
            <div style={{ width: 170 }}>
                <Progress percent={num} size="small" showInfo={false} />
            </div>
        </div>
    );
    // const changeinput = (e) => {
    //     switch (e.target.value.length) {
    //         case e.target.value.length < 4:
    //             settext('低')
    //             setnum(33)
    //             break;
    //         case e.target.value.length >= 5:
    //             settext('中')
    //             setnum(66)
    //             break;
    //         case e.target.value.length > 7:
    //             settext('高')
    //             setnum(100)
    //             break;
    //         default:
    //             break;
    //     }
    // }
    const onFinish = async (values) => {
        const res = await logins({
            username: values.username,
            password: values.password
        })
        if (res.status == 200) {
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('user', JSON.stringify(res.data.data.user))
            props.history.push('/')
        }
        console.log(res);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('账户或者密码不能为空');
    };
    return (
        <div className='congtent'>
            <div className='box1'>
                <div className='tital'>
                    <span>赤兔养车</span>
                </div>
                <div className='nav'>
                    <div className='nav-tital'>
                        <span className='active'>账户密码登录</span>
                    </div>
                    <div className='nav-tital'>
                        <span>手机号登录</span>
                    </div>
                </div>
                <div className='username'>
                    <Form
                        name="basic"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        labelAlign="left"
                    >
                        <Form.Item
                            label="账户"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input className='int' />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <div className='btn'>
                            <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                                <Button className='button' type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </div>
                        <div className='bottom'>
                            <div></div>
                            <a href=''>注册账户</a>
                            <a href=''>商家注册</a>
                        </div>
                    </Form>
                </div>
            </div>
            {/* <div className='box2'>
                <div className='tital'>
                    <span>赤兔养车</span>
                </div>
                <div className='username'><input type="text" placeholder='账户' /></div>
                <Popover placement="rightTop" content={content} trigger="click">
                    <div className='userpass'><input onInput={changeinput} type="text" placeholder='至少6位密码' /></div>
                </Popover>
                <div className='userispass'><input type="text" placeholder='确认密码' /></div>

                <div className='button'>
                    <button>立即注册</button>
                    <a href=''>使用已有账号登录</a>
                </div>
            </div> */}
        </div>
    )
}
